<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+ "://"+request.getServerName()+":"+request.getServerPort()+ path+"/";
%>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=chrome">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .modal-header {
            text-align: center;
        }

        table td {
            text-align: center;
            border: 0px;
        }

        table{
            table-layout:fixed;
        }

        .colStyle {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

    </style>
    <title>分类列表</title>
    <!-- 分页 -->
    <link href="<%=basePath%>css/mypage.css" rel="stylesheet">

    <link href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet">

    <link href="<%=basePath%>css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script type="text/javascript">
        function Check(form){
            if(form.username.value == ""){
                alert("账号不能为空！");
                return false;
            }
            if(form.phone.value == ""){
                alert("账号不能为空！");
                return false;
            }
            if(form.password.value == ""){
                alert("密码不能为空！");
                return false;
            }
            if(form.repassword.value == ""){
                alert("确认密码不能为空！");
                return false;
            }
            if(form.userRole.value == ""){
                alert("角色不能为空！");
                return false;
            }
            if(form.password.value != form.repassword.value){
                alert("两次密码输入不一致！");
                return false;
            }
        }
    </script>
</head>

<body>
<jsp:include page="../main_top.jsp"></jsp:include>
<jsp:include page="../main_left.jsp"></jsp:include>
<!--=============================================================================================================================================================================-->
<!--main-container-part-->
<!--main-container-part-->
<div id="content" style="margin-right: 1px; margin-top: 40px;">
    <!--breadcrumbs-->
    <div id="content-header">
        <div id="breadcrumb">
            <a href="<%=basePath%>admin/indexs" title="主页" class="tip-bottom"><i
                    class="icon-home"></i>主页</a> <a title="管理员列表" class="tip-bottom">管理员列表</a>
        </div>
    </div>
    <!--End-breadcrumbs-->

    <!-- Page table -->
    <div class="container" style="width: 1000px;">
        <!-- &lt;!&ndash; Marketing Icons Section &ndash;&gt;-->

        <div class="col-lg-12">
            <h2 class="page-header"style="margin-top: 10px; text-align: center; font-family: '微软雅黑', Verdana, sans-serif, '宋体', serif;"> 管理员列表显示</h2>
        </div>

        <!--搜索栏-->
        <form class="form-horizontal" id="myserchform" name="myform"
            action="<%=basePath%>admin/searchAdmin" method="GET">
            <div class="form-group">
                <div class="col-sm-8" style="text-align: center;">
                    <span>管理员编号：</span> <input type="text" placeholder="请输入纯数字~"
                        name="id" value="${searchAdmin.id}" />
                    <span>管理员名称：</span>
                    <input type="text" name="username" value="${searchAdmin.username}" />
                    <span>角色：</span>
                    <select name="userRole" id="myselected">
                        <option value="" selected="selected">请选择管理员角色</option>
                        <option value="0">超级管理员</option>
                        <option value="1">系统管理员</option>
                    </select>
                </div>
                <div class="col-sm-4">
                    <button class="btn btn-success btn-sm" type="submit">查找</button>
                    <c:if test="${item.userRole == 0}" >
                    <button class="btn btn-danger btn-sm" type="button"
                        id="deleteNoticeButton">删除</button>
                    </c:if>
                    <button class="btn btn-success btn-sm" type="button" onclick="add()">新增</button>
                </div>
            </div>
        </form>

        <!--表格显示-->
        <table class="table table-bordered" style="table-layout:fixed;">
            <thead>
            <tr>
                <th><input type="checkbox" id="selectAllButton"></th>
                <th>ID</th>
                <%--<th>留言用户</th>--%>
                <th>管理员姓名</th>
                <th>电话</th>
                <th>密码</th>
                <th>角色</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${adminGrid.rows}" var="item">
                <tr>
                    <td><input type="checkbox" name="itemIds" value="${item.id}"></td>
                        <%--<td>${notice.user.userid}</td>--%>
                    <td>${item.id}</td>
                    <td>${item.username}</td>
                    <td>${item.phone}</td>
                    <td>${item.password}</td>
                    <td>
                        <c:if test="${item.userRole == 0}">
                            <span style="color: blue">${item.userRoleName}</span>
                        </c:if> <c:if test="${item.userRole == 1}">
                            <span style="color: red">${item.userRoleName}</span>
                        </c:if>
                    </td>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm"
                                onclick="doDelete(${item.id})">删除</button>

                        <button class="btn btn-danger btn-sm" type="button"
                                onclick="doEdit(${item.id})">修改</button>

                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>

        <!--分页条-->
        <div style="text-align: right">
            <div class="pagination">
                <ul>
                    <li><a>总管理员数:${adminGrid.total }个</a></li>
                    <li><a>第${adminGrid.current }页</a></li>
                    <c:if test="${adminGrid.current ne 1 }">
                        <li><a
                            href="<%=basePath%>admin/adminList?pageNum=${adminGrid.current-1 }">上一页</a>
                        </li>
                    </c:if>

                    <c:if test="${adminGrid.current < (adminGrid.total+4)/5-1 }">
                        <li><a
                            href="<%=basePath%>admin/adminList?pageNum=${adminGrid.current+1 }">下一页</a>
                        </li>
                    </c:if>
                </ul>
            </div>
        </div>
    </div>
</div>


        <!--==================================================================================================================-->
        <jsp:include page="../main_bottom.jsp"></jsp:include>

            <!--修改  模态框（Modal） -->
            <div class="modal fade" id="editModal" tabindex="-1" role="dialog"
                 aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                                aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">修改管理员信息</h4>
                        </div>
                        <div class="modal-body" style="height: 0 auto;">
                            <form class="form-horizontal" id="myeditform" name="myform">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">ID:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="adminId" name="id" style="margin-top: 8px;" readonly="readonly" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">管理员名称:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="adminName" name="username" style="margin-top: 8px;" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">管理员账号:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="phone" name="phone" style="margin-top: 8px;" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">管理员密码:</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="password" id="password" class="form-control form_datetime" style="margin-top: 8px;">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">权限角色:</label>
                                    <div class="col-sm-8">
                                        <label><input style="width:15px; height:15px;" type="radio" name="userRole" value="0" />超级管理员</label>
                                        <label><input style="width:15px; height:15px;" type="radio" name="userRole" value="1" />系统管理员</label>
                                    </div>

                                </div>
                            </form>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" onclick="doSave()">提交更改</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal -->
            </div>

        <!-- 增加 模态框（Modal） -->
       <div class="modal fade" id="viewModal" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">新增管理员</h4>
                    </div>
                    <div class="modal-body" style="height: 0 auto ;">
                        <form class="form-horizontal" id="myviewform" name="myform">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">管理员名称:</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control"  name="adminName" id="addAdminName" style="margin-top: 8px;" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">管理员账号:</label>
                                <div class="col-sm-8">
								<input type="text" class="form-control" name="phone" id="addPhone" style="margin-top: 8px; width: 365px"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">管理员密码:</label>
                                <div class="col-sm-8">
                                    <input type="password" class="form-control" name="password" id="addPassword" style="margin-top: 8px;" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">确认密码</label>
                                <div class="col-sm-8">
                                    <input type="password" class="form-control" name="relPassword" id="relPassword" style="margin-top: 8px;" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">权限角色:</label>
                                <label>超级管理员<input style="width:15px;height:15px;" type="radio" name="userRole" value="0" /></label>
                                <label>系统管理员<input style="width:15px;height:15px;" type="radio" name="userRole" value="1" /></label>
                            </div>
                        </form>
                    </div>

                    <div class="modal-footer">
                        <button type="reset" class="btn btn-default" data-dismiss="modal">重置</button>
                        <button type="button" class="btn btn-primary" onclick="doAdd()">新增</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>
</body>

<script type="text/javascript" src="<%=basePath%>js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/bootstrap.min.js"></script>
<!-- datetimepicker -->
<script type="text/javascript"
        src="<%=basePath%>js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript"
        src='<%=basePath%>js/bootstrap-datetimepicker.zh-CN.js'></script>
<!-- 全选 base.js -->
<script type="text/javascript" src="<%=basePath%>js/custom/base.js"></script>

<script type="text/javascript">
    //初始化时间
    $(".form_datetime").datetimepicker({
        format:'yyyy-mm-dd hh:ii:ss',
        todayHighlight: true,
        language:'zh-CN',
        autoclose: true
    });

    /* 修改 */
    function doEdit(id){
        $.ajax({
            url:'<%=basePath%>admin/getAdmin',
            type:'GET',
            data:{id:id},
            dataType:'json',
            success:function(json){
                if(json){
                    $('#myeditform').find("input[name='id']").val(json.id);
                    $('#myeditform').find("input[name='username']").val(json.username);
                    $('#myeditform').find("input[name='phone']").val(json.phone);
                    $('#myeditform').find("input[name='password']").val(json.password);
                    $('#myeditform').find("input:radio[name='userRole'][value='"+json.userRole+"']").attr("checked", true);
                    $('#editModal').modal('toggle');
                }
            },
            error:function(){
                alert('请输入正确的数据!');
                $('#editModal').modal('hide');
            }
        });
    }

    /* 更新 */
    function doSave(){
        var data = {
            id: parseInt($("#adminId").val()),
            username: $("#adminName").val(),
            phone: parseInt($("#phone").val()),
            password: $("#password").val(),
            userRole: parseInt($("#myeditform").find("input:radio[name='userRole']:checked").val())
        };

        console.log(JSON.stringify(data));
        $.ajax({
            url:'<%=basePath%>admin/updateAdmin',
            type:'POST',
            data: JSON.stringify(data),// 序列化表单值
            dataType:'json',
            contentType : 'application/json;charset=UTF-8',
            success:function(json){
                alert(json.msg);
                $('#editModal').modal('toggle');
                location.reload();
            },
            error:function(){
                alert('请求超时或系统出错!');
                $('#editModal').modal('toggle');
            }
        });

    }

    function add() {
        $('#viewModal').modal('toggle');
    }

    /* 新增 */
    function doAdd(){
        var data = JSON.stringify({
            username: $("#addAdminName").val().trim(),
            phone: parseInt($("#addPhone").val().trim()),
            password: $("#addPassword").val().trim(),
            relPassword: $("#relPassword").val().trim(),
            userRole: parseInt($("#myviewform").find("input:radio[name='userRole']:checked").val())
        });

        console.log(data);

        if (data.username === ""
            || data.phone === null
            || data.password === ""
            || data.relPassword === ""
            || data.userRole === null) {
            alert("输入不能为空");
            return;
        }

        if (data.password !== data.relPassword) {
            alert("两次输入的密码不一致，请重新输入！")
            return;
        }

        console.log(JSON.stringify(data));
        $.ajax({
            url:'<%=basePath%>admin/addAdmin',
            type:'POST',
            data: data,// 序列化表单值
            dataType:'json',
            contentType : 'application/json;charset=UTF-8',
            success:function(json){
                alert(json.msg);
                location.reload();
            },
            error:function(){
                alert('请求超时或系统出错!');
                $('#myviewform').modal('toggle');
            }
        });

    }

    /* 查看 */
   /* function doView(id){
        $.ajax({
            url:'<%=basePath%>admin/getAdmin',
            type:'GET',
            data:{id:id},
            dataType:'json',
            success:function(json){
                if(json){
                    $('#myviewform').find("input[name='id']").val(json.id);
                    $('#myviewform').find("input[name='username']").val(json.context);
                    $('#myviewform').find("input[name='phone']").val(json.phone);
                    $('#myviewform').find("input[name='password']").val(json.phone);
                    /!*$('#myviewform').find("input[name='createat']").val(json.orderDate);*!/
                    if(json.userRole==0){$('#myviewform').find("input[name='userRole']").val('超级管理员');}
                    if(json.userRole==1){$('#myviewform').find("input[name='userRole']").val('系统管理员');}

                    $('#viewModal').modal('toggle');
                }
            },
            error:function(){
                alert('请求超时或系统出错!');
                $('#viewModal').modal('hide');
            }
        });
    }*/

    /!* 删除 *!/
    function doDelete(id){
        $.ajax({
            url:'<%=basePath%>admin/deleteAdmin',
            type:'POST',
            data:{id:id},
            dataType:'json',
            success:function(json){
                if(json) {
                    if (json.success) {
                        location.reload();
                    } else {
                        alert(json.msg);
                    }

                }
            },
            error:function(){
                alert('请求超时或系统出错!');
                $('#viewModal').modal('hide');
            }
        });
    }


    //根据值 动态选中
    $("#myselected option[value='${searchnotice.status}']").attr("selected","selected");


</script>

</html>
